<template>
  <div class="order">
    <!-- 居中 -->
    <div class="orderDetail">
      <!-- 左边商品 -->
      <div class="product">
        <!-- 大图 -->
        <div class="large">
          <img
            :src="`${order.o_img}`"
            alt=""
            @mouseover="toggle"
            @mouseout="toggle"
           
          />
          <!-- 鼠标进入现实小方框 -->
          <div class="mask" v-show="hide"  :style="maskStyle"></div>
          <div id="super-mask"  @mouseover="toggle"
            @mouseout="toggle" @mousemove="move"></div>
          <div
            class="bg-lg"
            :style="{'background-image':`url(${order.o_img})`
            ,'background-position':`-${parseInt(bgStyle.bgleft*1.5)}px -${parseInt(bgStyle.bgtop*1.5)}px`}"
            v-show="hide"
          ></div>
        </div>
        <!-- 小图 -->
        <div class="small">
          <img
            :src="`${order.o_img}`"
            alt=""
            style="width: 92px; height: 70px; border-radius: 6px"
          />
        </div>
      </div>
      <!-- 右边商品订单详情 -->
      <div class="detail">
        <h3>{{ order.otitle }}</h3>
        <p>{{ order.o_introduct }}</p>
        <div class="price">
          <span>价格</span><strong>{{ order.o_price }}</strong
          ><span style="color: #ffc802">环保金</span>
        </div>
        <div class="saled">
          <span>已售</span><span>{{ order.o_sold }}件</span>
        </div>
        <div class="num">
          <!-- 数量 -->
          <span>数量</span>
          <div>
            <button @click="minus">-</button>
            <input type="text" v-model="v" />
            <button @click="add">+</button>
          </div>
        </div>
        <button class="bttn">立即兑换</button>
      </div>
    </div>
    <!-- 使用过程 -->
    <div class="down">
      <div class="process">
        <img src="/img/shoppingcenter/process.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
 
  data() {
    return {
      v:0,
      order: [],
      hide: false,
      maskStyle:{
        left:0,
        top:0
      },
      bgStyle:{
        bgleft:0,
        bgtop:0
      }
    };
  },
  mounted() {
    // 获取点击到的序号 o_id
    console.log(this.$route.params.o_id);
    let id = this.$route.params.o_id;
    //  console.log(o_id);
    this.axios
      .get("/v1/products/order/o_id", { params: { o_id: id } })
      .then((res) => {
        console.log(res.data.data[0]);
        this.order = res.data.data[0];
      });
  },
  methods: {
    minus(){
      if(this.v>0){
        this.v--;
      }
    },
    add(){
      this.v++;
    },

    toggle(event) {
      this.hide = !this.hide;
    },
    move(e){
      // console.log(e.offsetX,e.offsetY);
      var left=e.offsetX-50;
      var top=e.offsetY-50;
      console.log(left,top)
      if(left<0)left=0;else if(left>(540-100))left=440;
      if(top<0)top=0;else if(top>(414-100))top=314;
      this.maskStyle={
        left:left+"px",
        top:top+"px"
      };
      this.bgStyle={
        bgleft:left,
        bgtop:top
      }
      console.log(this.maskStyle.left.slice(0,-2))
      // this.maskStyle.top=top+'px';
    }
  },
};
</script>
<style lang="scss">
.order {
  .orderDetail {
    padding: 60px 0;
    width: 1200px;
    height: 496px;
    margin: 0 auto;
    // 左边商品
    .product {
      width: 540px;
      height: 500px;
      float: left;
      position: relative;
      // 大图
      .large {
        height: 414px;
        margin-bottom: 15px;
        position: relative;
        img {
          width: 100%;
          height: 414px;
          border-radius: 5px;
        }
        .mask {
          width: 100px;
          height: 100px;
          background-color: lightcoral;
          opacity: 0.4;
          position: absolute;
          top: 0;
        }
        #super-mask{
          width: 540px;
          height: 414px;
          // background-color: ;
          position: absolute;
          top:0;
          left:0;
          opacity: 0.5;
          z-index: 110;
        }
        .bg-lg {
          width: 600px;
          height: 480px;
          position: absolute;
          right: -655px;
          top: 0;
          z-index: 100px;
        }
      }
      //小图
      .small {
        width: 92px;
        height: 70px;
      }
    }
    // 右边商品订单详情
    .detail {
      width: 600px;
      height: 500px;
      float: right;
      h3 {
        font-size: 40px;
        font-weight: 400px;
        color: #333;
        line-height: 56px;
      }
      p {
        font-size: 16px;
        color: #999;
        padding: 6px 0 26px 0;
        border-bottom: 1px solid #ededed;
        margin-bottom: 28px;
      }
      .price {
        height: 60px;
        span {
          font-size: 16px;
          color: #999;
          margin-right: 18px;
        }
        strong {
          font-size: 40px;
          margin-right: 6px;
          color: #ffc802;
        }
      }
      .saled {
        font-size: 16px;
        color: #999;
        span {
          margin-right: 18px;
        }
      }
      //   数量
      .num {
        height: 44px;
        margin-top: 26px;
        span {
          font-size: 16px;
          color: #999;
          margin-right: 18px;
        }
        > div {
          display: inline-block;
          border: 1px solid #d5d5d5;
          button {
            width: 45px;
            height: 44px;
            font-size: 20px;
            text-align: center;
            border: none;
            background: 0 0;
          }
          input {
            height: 44px;
            width: 90px;
            border: none;
            font-size: 20px;
            text-align: center;
          }
        }
      }
      .bttn {
        border: none;
        background-color: #ffc802;
        border-radius: 4px;
        color: #fff;
        font-size: 16px;
        display: block;
        width: 248px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        margin-top: 54px;
      }
    }
  }
  .down {
    width: 100%;
    background-color: #f4f5f6;
    padding-bottom: 40px;
    overflow: hidden;
    .process {
      background-color: #fff;
      margin: 0 auto;
      width: 1200px;
      height: 6434px;
      margin-top: 50px;
      // background-color: red;
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>